<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #t_l{/*上层靠左的div*/
      width: 611px;height: 376px;
      background-color: #e8e8e8;
      background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
      background-repeat: no-repeat;
      background-position: 90% 90%;
      float: left;
    }
    body>div{/*表示最大的div*/
      width: 1000px;
      margin: 0 auto/*居中*/;
      overflow: hidden;
    }
    #t_r{/*上层靠右的div*/
      float: right;
      width: 375px;height: 376px;
      background-color: #e8e8e8;
      background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png");
      background-repeat: no-repeat;
      background-position: 90% 90%;
    }
    body>div>div{/*表示上下两层的div*/
      overflow: hidden;/*避免出现浮动之后高度识别为0的问题*/
      margin-bottom: 10px;
    }
    #b-l{/*下层左侧div*/
      width: 366px;height: 233px;
      background-color: #e8e8e8;
      float: left;
    }
    #b-r{
      float: right;/*下层右侧div（表示装着三个小的div的div）*/
    }
    #b-r>div{/*表示三个小的div*/
      width: 198px;height: 233px;
      background-color: #e8e8e8;
      float: left;
      margin-left: 10px;
    }


  </style>
</head>
<body>
<div>
  <div id="t_div">
    <div id="t_l"></div>
    <div id="t_r"></div>
  </div>
  <div id="b_div">
    <div id="b-l"></div>
    <div id="b-r">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>

</body>
</html>